<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>compName</view>
				<view>String</view>
				<view>button</view>
				<view>组件名，用于vi-style-controller内部样式总控，是确定使用哪个预定义样式方案的关键字。例如传入dialog，表示使用dialog组件的样式方案</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>主题色</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义主题色，如果设置则会覆盖主题色。格式#eee</view>
			</view>
			<view class="tr">
				<view>textColor</view>
				<view>String</view>
				<view>无</view>
				<view>文字固定色，如果设置则会固定文字颜色。格式#fff</view>
			</view>
			<view class="tr">
				<view>borderColor</view>
				<view>String</view>
				<view>无</view>
				<view>固定边框色。格式#fff</view>
			</view>
			<view class="tr">
				<view>backgroundColor</view>
				<view>String</view>
				<view>无</view>
				<view>固定背景色。格式#fff</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String, Number</view>
				<view>circle</view>
				<view>圆角，可选circle、square，或带单位数值</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>md</view>
				<view>预定尺寸</view>
			</view>
			<view class="tr">
				<view>plain</view>
				<view>Boolean</view>
				<view>false</view>
				<view>是否镂空</view>
			</view>
			<view class="tr">
				<view>width</view>
				<view>String</view>
				<view>无</view>
				<view>自定义宽，如果设置则会覆盖预定义尺寸。可填入带单位数值</view>
			</view>
			<view class="tr">
				<view>height</view>
				<view>String</view>
				<view>无</view>
				<view>自定义高，如果设置则会覆盖预定义尺寸。可填入带单位数值</view>
			</view>
			<view class="tr">
				<view>inline</view>
				<view>Boolean</view>
				<view>false</view>
				<view>调整为内联元素，宽度自动。关闭时默认宽度100%</view>
			</view>
			<view class="tr">
				<view>borderType</view>
				<view>String</view>
				<view>无</view>
				<view>边框类型，同css。solid等</view>
			</view>
			<view class="tr">
				<view>borderWidth</view>
				<view>Number, String</view>
				<view>1</view>
				<view>边框宽，默认范围px</view>
			</view>
			<view class="tr">
				<view>borderBox</view>
				<view>Boolean</view>
				<view>false</view>
				<view>盒模型变更为border-box</view>
			</view>
			<view class="tr">
				<view>fontSize</view>
				<view>Number, String</view>
				<view>0</view>
				<view>自定字号，如果设置则会覆盖预定义尺寸。可填入带单位数值</view>
			</view>
			<view class="tr">
				<view>bold</view>
				<view>Boolean</view>
				<view>false</view>
				<view>内容区域slot加粗</view>
			</view>
			<view class="tr">
				<view>shadow</view>
				<view>String</view>
				<view>无</view>
				<view>阴影，格式为css的box-shadow格式</view>
			</view>
			<view class="tr">
				<view>loading</view>
				<view>Boolean, Number</view>
				<view>false</view>
				<view>加载中状态，可选值1-5，匹配5种预定图标样式</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>只读</view>
			</view>
			<view class="tr">
				<view>disabledMsg</view>
				<view>String</view>
				<view>无</view>
				<view>禁用状态下，点击弹出提示，无内容时不提示</view>
			</view>
			<view class="tr">
				<view>readOnlyMsg</view>
				<view>String</view>
				<view>无</view>
				<view>只读状态下，点击弹出提示，无内容时不提示</view>
			</view>
			<view class="tr">
				<view>@click</view>
				<view>事件</view>
				<view></view>
				<view>点击事件，无提交参数</view>
			</view>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-button>按钮文字或带图标&lt;/vi-button>`}}
			</view>
			<view class="py-sm">
				<vi-button @click="click">默认按钮</vi-button>
				<view class="fbox">第一主题色</view>
			</view>
			<view class="py-sm">
				<vi-button type="second">按钮</vi-button>
				<view class="fbox">第二主题色 type=second</view>
			</view>
			<view class="py-sm">
				<vi-button type="third">按钮</vi-button>
				<view class="fbox">第三主题色 type=third</view>
			</view>
			<view class="py-sm">
				<vi-button type="fourth">按钮</vi-button>
				<view class="fbox">第四主题色 type=fourth</view>
			</view>
			<view class="py-sm">
				<vi-button type="fifth">按钮</vi-button>
				<view class="fbox">第五主题色 type=fifth</view>
			</view>
			<view class="py-sm">
				<vi-button type="default">按钮</vi-button>
				<view class="fbox">default场景色 type=default</view>
			</view>
			<view class="py-sm">
				<vi-button type="success">按钮</vi-button>
				<view class="fbox">success场景色 type=success</view>
			</view>
			<view class="py-sm">
				<vi-button type="warning">按钮</vi-button>
				<view class="fbox">warning场景色 type=warning</view>
			</view>
			<view class="py-sm">
				<vi-button type="error">按钮</vi-button>
				<view class="fbox">error场景色 type=error</view>
			</view>
			<view class="py-sm">
				<vi-button type="grey">按钮</vi-button>
				<view class="fbox">grey场景色 type=grey</view>
			</view>
			<view class="py-sm">
				<vi-button color="#ffc0cb">按钮</vi-button>
				<view class="fbox">自定义颜色 color=#ffc0cb</view>
			</view>
			<view class="py-sm">
				<vi-button size="sm">小按钮</vi-button>
				<view class="fbox">size=sm</view>
			</view>
			<view class="py-sm">
				<vi-button size="md">正常按钮</vi-button>
				<view class="fbox">size=md 或不设置</view>
			</view>
			<view class="py-sm">
				<vi-button size="lg">大按钮</vi-button>
				<view class="fbox">size=lg</view>
			</view>
			<view class="py-sm">
				<vi-button plain>镂空按钮</vi-button>
				<view class="fbox">plain=true</view>
			</view>
			<view class="py-sm">
				<vi-button radius="square">方形按钮</vi-button>
				<view class="fbox">radius=square</view>
			</view>
			<view class="py-sm">
				<vi-button radius="3px">自定义圆角</vi-button>
				<view class="fbox">radius=3px</view>
			</view>
			<view class="py-sm">
				<vi-button disabled>禁用按钮</vi-button>
				<view class="fbox">disabled=true</view>
			</view>
			<view class="py-sm">
				<vi-button plain disabled>禁用镂空按钮</vi-button>
				<view class="fbox">plain=true disabled=true</view>
			</view>
			<view class="py-sm">
				<vi-button loading>加载中图标</vi-button>
				<view class="fbox">loading=true</view>
			</view>
			<view class="py-sm">
				<vi-button :loading="4" plain>镂空加载</vi-button>
				<view class="fbox">loading=4 plain=true</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			click(){
				console.log("发生了点击");
			}
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
